
<template>
  <div>

    <el-form :model="queryParams"  :inline="true" label-width="68px" style="margin-top: 20px">
      <el-form-item label="文章" >
        <el-select
            style="width: 200px"
            v-model="queryParams.contentId"
            filterable
            remote
            reserve-keyword
            placeholder="搜索要评论的文章"
            :remote-method="remoteMethod"
        >
          <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.title"
              :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="Search" @click="getList()">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>

      <el-form-item>
        <el-button
            type="primary"
            plain
            icon="Plus"
            @click="handleAdd"
        >新增</el-button>
      </el-form-item>
    </el-form>






    <el-table
        :data="menuList"
        row-key="id"
        lazy
        :default-expand-all="isExpandAll"
    >
      <el-table-column prop="id" label="评论编号" align="center"  />
      <el-table-column prop="parentId" label="父评论编号" align="center"  />
      <el-table-column prop="userId" label="评论用户编号" align="center"  />
      <el-table-column prop="userName" label="评论用户姓名" align="center"  />

      <el-table-column prop="replyCommentId" label="被回复评论的编号(如果是一级评论则为空）" align="center"  />
      <el-table-column prop="replyUserId" label="被回复评论的用户编号" align="center"  />
      <el-table-column prop="replyUserName" label="被回复评论的用户姓名" align="center"  />

      <el-table-column prop="contentId" label="文章" align="center"  >
        <template #default="scope">
          <el-popover
              placement="left-start"
              :title="articleTitle"
              :width="250"
              trigger="hover"
          >
            <template #reference>
              <el-button type="success" round
                         @click="jumpArticle(scope.row.contentId)"
                         @mouseenter="myShow(scope.row.contentId)"
              >查看</el-button>
            </template>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column prop="likeNum" label="点赞数" align="center" sortable />
      <el-table-column prop="contentFlag" label="作者/用户" align="center" >
        <template #default="scope">
          <el-tag v-if="scope.row.contentFlag === 1" type="primary">作者</el-tag>
          <el-tag v-else type="success">用户</el-tag>
        </template>

      </el-table-column>
      <el-table-column prop="commentDetails" label="评论内容" align="center"  >
        <template #default="scope">
          <el-popover
              placement="left-start"
              :title="scope.row.userName+'评论'"
              :width="200"
              trigger="hover"
              :content="scope.row.commentDetails"
          >
            <template #reference>
              <el-button class="m-2">评论</el-button>
            </template>
          </el-popover>
        </template>

      </el-table-column>
      <el-table-column label="回复" align="center" >
        <template #default="scope">
          <el-button class="my-button" link type="primary" icon="Edit" @click="replyReview(scope.row.id)" >回复</el-button>
        </template>
      </el-table-column>
    </el-table>




    <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageCurrent"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

    <!--新增评论弹框-->
    <el-dialog v-model="dialogFormVisible" title="新增评论" width="500">
      <el-form :model="form" label-width="80px">
        <el-form-item label="文章" >
          <el-select
              v-model="form.contentId"
              filterable
              remote
              reserve-keyword
              placeholder="搜索要评论的文章"
              :remote-method="remoteMethod"
          >
            <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.title"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="评论内容" >
          <el-input
              v-model="form.commentDetails"
              autosize
              type="textarea"
              placeholder="评论内容"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="saveReview"> 确认 </el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>

        </div>
      </template>
    </el-dialog>


<!--回复评论弹框-->
    <el-dialog v-model="diaormVisible" title="回复" width="500">
      <el-form :model="form">
        <el-form-item >
          <el-input
              autosize
              type="textarea"
              placeholder="输入回复内容"
              v-model="form.commentDetails" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="reviewOk">确认</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>


<script setup name="review">
import router from '@/router'
import {addReview,getReview,saveReviews, listReview} from '@/api/article/review.js'
import {getArticle, listArticle} from "@/api/article/article.js";
const total = ref(0);
const menuList = ref([]);
const queryParams = ref({
  pageCurrent: 1,
  pageSize: 10,
  contentId:null
});
const isExpandAll = ref(false);
const dialogFormVisible = ref(false)
const diaormVisible = ref(false)
const options = ref([])
const reviewDetil = ref({});
const articleTitle = ref('');
const form = reactive({
  contentId:null,
  commentDetails:null,
  title:null
})

async function myShow(contentId){

  const response = await getArticle(contentId)
  articleTitle.value = response.data.title

}

function reviewOk(){

  //构建评论对象
  let review = {
    //回复的内容
    commentDetails:form.commentDetails,
    //回复评论的id
    id:reviewDetil.value.id,
  }
  saveReviews(review).then(response => {
    proxy.$modal.msgSuccess("回复成功");
  });
  diaormVisible.value = false
  getList();

}

function replyReview(reviewId){

  form.commentDetails = null
  diaormVisible.value = true
  //查询评论详情
  getReview(reviewId).then(response => {
    reviewDetil.value = response.data
  });

}

function saveReview(){
  delete form.title;
  addReview(form).then(response => {
    proxy.$modal.msgSuccess("新增成功");

  });
  dialogFormVisible.value = false
  getList()
}

/**
 * 跳转文章详情
 */
function jumpArticle(id){
  router.push({
    name:'articleDetil',
    query:{
      articleId:id,
    }
  })
}

/*远程搜索文章*/
const remoteMethod = (query) => {
  form.title = query

  if (query) {
    listArticle(form).then(response => {
      options.value = response.rows;

    });
  } else {
    options.value = []
  }
}

/** 查询菜单列表 */
function getList() {

  listReview(queryParams.value).then(response => {
    menuList.value = response.rows
    total.value = response.total;
  });
  console.log(menuList.value)
}

/** 新增按钮操作 */
function handleAdd() {
  dialogFormVisible.value = true
}

/** 重置按钮操作 */
function resetQuery() {
  queryParams.value.contentId = null
  getList()
}

getList()
</script>


<style scoped lang="scss">

</style>